<!--导航栏-->
<template>
  <div class="menus">
    <ul>
      <li>
        <router-link :to="{name:'home'}">首页</router-link>
      </li>
      <li>
        <router-link :to="{name:'newsbook'}"> 新书 </router-link>
      </li>
      <li>
        <a href="javascript:;"> 特价书 </a>
      </li>
      <li>
        <a href="javascript:;"> 教材 </a>
      </li>
      <li>
        <a href="javascript:;"> 视听教程 </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Menus",
};
</script>
    
<style>
.menus{
    margin-top: 30px;
}

.menus ul {
  width: 100%;
  overflow: hidden;
}
.menus ul li {
  width: 20%;
  float: left;
}
.menus ul li a {
  width: 100%;
  line-height: 40px;  
  height: 40px;
  text-align: center;
  display: block;
  background: rgba(0, 0, 0);
  color: gainsboro;
  border-left: 1px solid white;
}


</style>